<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<!-- #ifdef APP-PLUS -->
				<view class="status_bar">
					<view class="top_view"></view>
				</view>
				<!-- #endif -->
				<view class="top_nav">
					<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image" @click="pageBack" />
					<view class="cate">订单详情</view>
				</view>
				<view class="section_2" @tap="open">
					<image src="/static/local/f9ca23eb45218e324ec476878fc42fee.png" class="image_1" />
					<view class="center_view">
						<block v-if="vk.pubfn.isNotNull(now)">
							<view>{{now.name}}<text class="text_3">{{now.phone_number}}</text></view>
							<view class="text_1">{{now.province + now.city + now.area + now.detail}}</view>
						</block>
						<block v-else>
							<view style="text-align: center;padding: 20rpx;">当前地址为空</view>
						</block>
					</view>
					<u-icon name="arrow-right" color="#333" size="30"></u-icon>
				</view>
			</view>
			<view class="flex-row section_3">
				<u-image :src="course.thumb" :lazy-load="true" class="image_3" mode="aspectFill"></u-image>
				<view class="flex-col group_4">
					<text class="text_4">{{course.title}}</text>
					<text class="text_5" v-if="course.charge">￥{{course.charge / 100}}</text>
				</view>
			</view>
		</view>
		<view class="flex-row section_4">
			<text class="text_6">合计：</text>
			<text class="text_7" v-if="course.charge">￥{{course.charge / 100}}</text>
			<view class="flex-col items-center button" @tap="send">提交订单</view>
		</view>
		<!-- 分类弹框 -->
		<u-popup v-model="show" mode="bottom" height="70%" :closeable="true">
			<view class="pop_bg">
				<view class="title">地址选择</view>
				<view class="main">
					<scroll-view scroll-y scroll-with-animation class="left_scroll">
						<view class="section_2" :class="{select: item._id == now._id}" v-for="item in address"
							:key="item._id" @tap="now = item;show = false">
							<image src="/static/local/f9ca23eb45218e324ec476878fc42fee.png" class="image_1" />
							<view class="center_view">
								<view>{{item.name}}<text class="text_3">{{now.phone_number}}</text></view>
								<view class="text_1">{{item.province + item.city + item.area + item.detail}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				type: 1, //1普通课程购买，2 直播课程购买
				courseId: '',
				pass: false,
				// 课程信息
				course: {},
				// 地址列表
				address: [],
				// 当前显示
				now: {},

				show: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			this.getAddress()
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.courseId = options.course_id
				if (options.type) {
					this.type = options.type
				}
				// 过期 1过 2没过
				this.pass = options.pass == '1' ? true : false
				this.getAddress()
			},
			getAddress() {
				// 获取地址和课程信息
				if (this.type == 1) {
					vk.callFunction({
						url: 'client/course/kh/getAddressAndCourse',
						title: '请求中...',
						data: {
							need_user_info: true,
							id: that.courseId
						},
						success: function(res) {
							that.course = res.data.course
							that.address = res.data.address
							if (that.address && that.address.length > 0) that.now = that.address[0]
						}
					})
				} else {
					vk.callFunction({
						url: 'client/liveCourse/kh/getAddressAndCourse',
						title: '请求中...',
						data: {
							need_user_info: true,
							id: that.courseId
						},
						success: function(res) {
							that.course = res.data.course
							that.address = res.data.address
							if (that.address && that.address.length > 0) that.now = that.address[0]
						}
					})
				}
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			send() {
				if (vk.pubfn.isNull(this.now)) {
					vk.toast('请选择收货地址')
					return
				}
				//先创建订单
				uni.showLoading({
					title: "创建订单中..."
				})
				uni.vk.callFunction({
					url: this.type==1?'client/order/kh/create/course':'client/order/kh/create/live_course',
					data: {
						_id: this.courseId,
						type: this.type,
						address: this.now,
						pass: this.pass
					},
					success(data) {
						uni.hideLoading()
						//再前往支付
						uni.vk.redirectTo('/pages/payment/payType?order_id=' + data.order_id)
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			open() {
				if (vk.pubfn.isNotNull(this.now)) return this.show = true
				vk.navigateTo('/pages/mine/setting/address?buy=1')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f6f9;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.group {
			.section_1 {
				padding: 0 20rpx;
				background-image: linear-gradient(180deg,
						rgb(255, 150, 12) 0%,
						rgb(255, 150, 12) 0%,
						rgb(253, 211, 3) 63.17%,
						rgba(253, 211, 3, 0.06) 85.77%,
						rgba(255, 255, 255, 0) 100%,
						rgba(255, 255, 255, 0) 100%);

				.top_nav {
					padding-bottom: 24rpx;
					color: rgb(51, 51, 51);
					font-size: 34rpx;
					line-height: 41rpx;
					white-space: nowrap;
					height: 88rpx;
					position: relative;

					.image {
						left: 1rpx;
						top: 27rpx;
						width: 19rpx;
						height: 35rpx;
						position: absolute;
					}

					.cate {
						width: 100%;
						padding: 20rpx 0;
						color: rgb(51, 51, 51);
						font-size: 34rpx;
						font-weight: 500;
						line-height: 41rpx;
						white-space: nowrap;
						text-align: center;
					}
				}

				.group_1 {
					color: rgb(51, 51, 51);
					font-size: 34rpx;
					line-height: 41rpx;
					white-space: nowrap;
					position: relative;

					.image {
						position: absolute;
						left: 1rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 19rpx;
						height: 35rpx;
					}
				}

				.section_2 {
					margin-top: 32rpx;
					padding: 39rpx 20rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 12rpx;
					align-items: center;
					color: rgb(102, 102, 102);
					font-size: 24rpx;
					line-height: 28rpx;
					display: flex;

					.image_1 {
						width: 44rpx;
						height: 52rpx;
						margin-right: 26rpx;
					}

					.center_view {
						flex: 1;
						color: rgb(33, 33, 33);
						font-size: 28rpx;

						.text_3 {
							font-size: 24rpx;
							margin-left: 20rpx;
						}

						.text_1 {
							color: #666666;
							font-size: 24rpx;
							margin-top: 20rpx;
						}
					}
				}
			}

			.section_3 {
				margin: 20rpx;
				padding: 32rpx 18rpx 32rpx 20rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 12rpx;
				position: relative;

				.image_3 {
					border-radius: 8rpx !important;
					width: 250rpx !important;
					height: 160rpx !important;
					overflow: hidden !important;
				}

				.group_4 {
					margin-left: 26rpx;
					margin-bottom: 4rpx;
					flex: 1 1 auto;

					.text_4 {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						line-height: 35rpx;
						text-align: left;
					}

					.text_5 {
						margin-left: 7rpx;
						margin-top: 43rpx;
						color: rgb(246, 21, 21);
						font-size: 36rpx;
						line-height: 43rpx;
						white-space: nowrap;
					}
				}
			}
		}

		.section_4 {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 20rpx;
			background-color: rgb(255, 255, 255);

			.text_6 {
				align-self: center;
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.text_7 {
				align-self: center;
				color: rgb(255, 0, 0);
				font-size: 42rpx;
				line-height: 50rpx;
				white-space: nowrap;
			}

			.button {
				margin-left: 24rpx;
				padding: 23rpx 0 21rpx;
				flex: 1 1 auto;
				color: rgb(255, 255, 255);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
				background-image: url('/static/local/f2e7c584e7866f38ac1888aa78f4e227.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 78rpx;
			}
		}
	}

	.pop_bg {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.main {
			height: calc(100% - 50rpx);
			margin-top: 10rpx;
			overflow: hidden;
			display: flex;

			.left_scroll {
				margin-top: 2%;
				height: 98%;
				width: 100%;

				.section_2 {
					padding: 39rpx 20rpx;
					border: 2rpx solid #F4F6F9;
					background-color: #F4F6F9;
					border-radius: 12rpx;
					align-items: center;
					color: rgb(102, 102, 102);
					font-size: 24rpx;
					line-height: 28rpx;
					display: flex;
					margin-bottom: 20rpx;

					.image_1 {
						width: 44rpx;
						height: 52rpx;
						margin-right: 26rpx;
					}

					.center_view {
						flex: 1;
						color: rgb(33, 33, 33);
						font-size: 28rpx;

						.text_3 {
							font-size: 24rpx;
							margin-left: 20rpx;
						}

						.text_1 {
							color: #666666;
							font-size: 24rpx;
							margin-top: 20rpx;
						}
					}
				}

				.select {
					border: 2rpx solid #FF960C;
				}
			}
		}
	}
</style>
